<!--
 * @Author       : xiaowu wwl093000@163.com
 * @Date         : 2023-05-11 21:01:46
 * @LastEditTime : 2023-07-19 10:00:33
 * @LastEditors  : xiaowu wwl093000@163.com
 * @FilePath     : /erp-admin-ui/src/views/userInfo/headoffice/index.vue
 * @Description  : -总公司首页
-->
<template>
  <div class="dashboard-editor-container">

    <headoffice-group />

    <!-- <bonus-office /> -->

    <el-row>
      <el-col>
        <div class="chart-wrapper">
          <p>分公司销售排行（销售金额累计TOP10）</p>
          <div class="chart-wrapper-box">
            <el-table
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
              :data="fgsxsData" 
              border
              style="width: 100%"
              v-loading="fgsxsloading"
            >
              <el-table-column type="index" label="序号" width="50">
              </el-table-column>
              <el-table-column prop="officeName" label="分公司名"></el-table-column>
              <el-table-column prop="saleNumber" label="订单金额" />
              <el-table-column prop="salesAmount" label="销售金额" />
              <el-table-column prop="salesCoMent" label="销售提成" />
              <el-table-column prop="procureFlow" label="采购成本" />
              <el-table-column prop="goodsCost" label="商品成本" />
              <el-table-column prop="logisticsCost" label="物流成本" />
               <el-table-column prop="estimatedProfit" label="预估利润" />
                <el-table-column prop="profitRate" label="利润率" />
              <el-table-column prop="companyPerk" label="公司补贴" />
              <el-table-column prop="bounsMent" label="奖金" />
              <el-table-column prop="agentNumber" label="代理数量" />
              <el-table-column prop="userNumber" label="学员数量" />
              <el-table-column prop="shopNumber" label="店铺数量" />
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <div class="chart-wrapper">
          <p>代理销售排行（销售金额累计TOP20）</p>
          <div class="chart-wrapper-box">
            <el-table
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
              :data="dlxsData" 
              border
              style="width: 100%"
              v-loading="dlxsloading"
            >
            <el-table-column prop="index" label="序号" width="50">
              </el-table-column>
              <el-table-column prop="shopName" label="代理名称"></el-table-column>
              <el-table-column prop="officeName" label="分公司名称"></el-table-column>
              <el-table-column prop="saleNumber" label="订单金额" />
              <el-table-column prop="salesAmount" label="销售金额" />
              <el-table-column prop="salesCoMent" label="销售提成" />
              <el-table-column prop="procureFlow" label="采购成本" />
              <el-table-column prop="goodsCost" label="商品成本" />
              <el-table-column prop="logisticsCost" label="物流成本" />
               <el-table-column prop="estimatedProfit" label="预估利润" />
                <el-table-column prop="profitRate" label="利润率" />
              <el-table-column prop="companyPerk" label="公司补贴" />
              <el-table-column prop="bounsMent" label="奖金" />
              <el-table-column prop="userNumber" label="学员数量" />
              <el-table-column prop="shopNumber" label="店铺数量" />
            </el-table>
            <pagination
              v-show="dlxstotal>0"
              :total="dlxstotal"
              :page.sync="dlxsParams.pageNum"
              :limit.sync="dlxsParams.pageSize"
              @pagination="getHeadOfficeAgentSaleRankingMonthData"
            />
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <div class="chart-wrapper">
          <p>近一个月店铺销售排行（销售金额累计TOP50）</p>
          <div class="chart-wrapper-box">
            <el-table
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
              :data="dpxsData" 
              border
              style="width: 100%"
              v-loading="dpxsloading"
            >
              <el-table-column prop="index" label="序号" width="50">
              </el-table-column>
              <el-table-column prop="userName" label="店铺账号"></el-table-column>
              <el-table-column prop="shopName" label="店铺名"></el-table-column>
              <el-table-column prop="orderNumber" label="订单数" />
              <el-table-column prop="saleNumber" label="销售金额" />
              <el-table-column prop="profitAmount" label="利润" />
              <el-table-column prop="profitRate" label="利润率" />
              <el-table-column prop="officeName" label="所属分公司" />
            </el-table>
            <pagination
              v-show="dpxstotal>0"
              :total="dpxstotal"
              :page.sync="dpxsParams.pageNum"
              :limit.sync="dpxsParams.pageSize"
              @pagination="getHeadOfficeShopSaleRankingMonthData"
            />
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <div class="chart-wrapper">
          <p>近一个月商品销售排行（销售金额累计TOP50）</p>
          <div class="chart-wrapper-box">
            <el-table
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
              :data="spxsData" 
              border
              style="width: 100%"
              v-loading="spxsloading"
            >
              <el-table-column prop="index" label="序号" width="50">
              </el-table-column>
              <el-table-column prop="productName" label="商品名称"></el-table-column>
              <el-table-column prop="orderNumber" label="订单数" />
              <el-table-column prop="saleNumber" label="销售金额" />
              <el-table-column prop="profitAmount" label="利润" />
              <el-table-column prop="profitRate" label="利润率" />
            </el-table>
            <pagination
              v-show="spxstotal>0"
              :total="spxstotal"
              :page.sync="spxsParams.pageNum"
              :limit.sync="spxsParams.pageSize"
              @pagination="getHeadOfficeGoodSaleRankingMonthData"
            />
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <div class="chart-wrapper">
          <p>近一个月类目销售排行（销售金额累计TOP20）</p>
          <div class="chart-wrapper-box">
            <el-table
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
              :data="lmxsData" 
              border
              style="width: 100%"
              v-loading="lmxsloading"
            >
              <el-table-column prop="index" label="序号" width="50">
              </el-table-column>
              <el-table-column prop="categoryName" label="类目"></el-table-column>
              <el-table-column prop="orderNumber" label="订单数" />
              <el-table-column prop="saleNumber" label="销售金额" />
              <el-table-column prop="profitAmount" label="利润" />
              <el-table-column prop="profitRate" label="利润率" />
            </el-table>
            <pagination
              v-show="lmxstotal>0"
              :total="lmxstotal"
              :page.sync="lmxsParams.pageNum"
              :limit.sync="lmxsParams.pageSize"
              @pagination="getHeadOfficeCategoryIdSaleRankingMonthData"
            />
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <div class="chart-wrapper margin0">
          <p>近一个月国家销售排行（销售金额累计TOP10）</p>
          <div class="chart-wrapper-box">
            <el-table
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
              :data="gjxsData" 
              border
              style="width: 100%"
              v-loading="gjxsloading"
            >
              <el-table-column prop="index" label="序号" width="50">
              </el-table-column>
              <el-table-column prop="countryName" label="国家"></el-table-column>
              <el-table-column prop="orderNumber" label="订单数" />
              <el-table-column prop="saleNumber" label="销售金额" />
              <el-table-column prop="profitAmount" label="利润" />
              <el-table-column prop="profitRate" label="利润率" />
            </el-table>
            <pagination
              v-show="gjxstotal>0"
              :total="gjxstotal"
              :page.sync="gjxsParams.pageNum"
              :limit.sync="gjxsParams.pageSize"
              @pagination="getHeadOfficeCountrySaleRankingMonthData"
            />
          </div>
        </div>
      </el-col>
    </el-row>

    <notice />
  </div>
</template>

<script>
import HeadofficeGroup from '../../dashboard/HeadofficeGroup'
import OrderChart from '../../dashboard/OrderChart'
import BonusOffice from '../../dashboard/BonusOffice'
import Notice from '../../dashboard/Notice'
import {
  HeadOfficeBranchOfficeSaleRankingMonthData,
  HeadOfficeAgentSaleRankingMonthData,
  HeadOfficeShopSaleRankingMonthData,
  HeadOfficeGoodSaleRankingMonthData,
  HeadOfficeCategoryIdSaleRankingMonthData,
  HeadOfficeCountrySaleRankingMonthData
} from "@/api/index/index"

export default {
  name: 'headofficePage',
  components: {
    HeadofficeGroup,
    OrderChart,
    BonusOffice,
    Notice
  },
  data() {
    return {
      fgsxsData: [], // 分公司销售排行（销售金额累计TOP10）
      dlxsData: [], // 代理销售排行（销售金额累计TOP20）
      dpxsData: [], // 近一个月店铺销售排行（销售金额累计TOP50）
      spxsData: [], // 近一个月商品销售排行（销售金额累计TOP50）
      lmxsData: [], // 近一个月类目销售排行（销售金额累计TOP20）
      gjxsData: [], // 近一个月类目销售排行（销售金额累计TOP20）
      dlxsParams: {
        pageSize: 10,
        pageNum: 1
      },
      dpxsParams: {
        pageSize: 10,
        pageNum: 1
      },
      spxsParams: {
        pageSize: 10,
        pageNum: 1
      },
      lmxsParams: {
        pageSize: 10,
        pageNum: 1
      },
      gjxsParams: {
        pageSize: 10,
        pageNum: 1
      },
      dlxstotal: 0,
      dpxstotal: 0,
      spxstotal: 0,
      lmxstotal: 0,
      gjxstotal: 0,
      fgsxsloading: true,
      dlxsloading: true,
      dpxsloading: true,
      spxsloading: true,
      lmxsloading: true,
      gjxsloading: true
    }
  },
  created() {
    this.getHeadOfficeBranchOfficeSaleRankingMonthData();
    this.getHeadOfficeAgentSaleRankingMonthData();
    this.getHeadOfficeShopSaleRankingMonthData();
    this.getHeadOfficeGoodSaleRankingMonthData();
    this.getHeadOfficeCategoryIdSaleRankingMonthData();
    this.getHeadOfficeCountrySaleRankingMonthData();
  },
  methods: {
    // 分公司销售排行（销售金额累计TOP10）
    getHeadOfficeBranchOfficeSaleRankingMonthData() {
      this.fgsxsloading = true;
      HeadOfficeBranchOfficeSaleRankingMonthData().then(res => {
        this.fgsxsData = res.data;
        this.fgsxsloading = false;
      })
    },
    // 代理销售排行（销售金额累计TOP20）
    getHeadOfficeAgentSaleRankingMonthData() {
      this.dlxsloading = true;
      HeadOfficeAgentSaleRankingMonthData(this.dlxsParams).then(res => {
        this.dlxsData = res.rows;
        this.dlxstotal = res.total;
        this.dlxsloading = false;
      })
    },
    // 近一个月店铺销售排行（销售金额累计TOP50）
    getHeadOfficeShopSaleRankingMonthData() {
      this.dpxsloading = true;
      HeadOfficeShopSaleRankingMonthData(this.dpxsParams).then(res => {
        this.dpxsData = res.records;
        this.dpxstotal = res.total;
        this.dpxsloading = false;
      })
    },
    // 近一个月商品销售排行（销售金额累计TOP50）
    getHeadOfficeGoodSaleRankingMonthData() {
      this.spxsloading = true;
      HeadOfficeGoodSaleRankingMonthData(this.spxsParams).then(res => {
        this.spxsData = res.records;
        this.spxstotal = res.total;
        this.spxsloading = false;
      })
    },
    // 近一个月类目销售排行（销售金额累计TOP20）
    getHeadOfficeCategoryIdSaleRankingMonthData() {
      this.lmxsloading = true;
      HeadOfficeCategoryIdSaleRankingMonthData(this.lmxsParams).then(res => {
        this.lmxsData = res.records;
        this.lmxstotal = res.total;
        this.lmxsloading = false;
      })
    },
    // 近一个月国家销售排行（销售金额累计TOP10）
    getHeadOfficeCountrySaleRankingMonthData() {
      this.gjxsloading = true;
      HeadOfficeCountrySaleRankingMonthData(this.gjxsParams).then(res => {
        this.gjxsData = res.records;
        this.gjxstotal = res.total;
        this.gjxsloading = false;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 20px 16px 0;
    margin-bottom: 32px;

    .chart-wrapper-box {
      padding-bottom: 20px;
    }

    p {
      font-size: 16px;
      line-height: 18px;
      margin: 0 0 15px;
      color: #666;
    }
  }

  .margin0 {
    margin: 0;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>